<template>
  <div class="image-container">
    <div class="button-container">
      <input class="button-type" type="file" @change="handleFileUpload"/>
      <button class="button-type" @click="submitImage">上传图片</button>
    </div>

    <div class="image-preview-container">
      <div v-if="previewURL" class="image-preview">
        <img :src="previewURL" alt="Image Preview"/>
      </div>
      <div class="image-preview">

        <img v-show="imageURL" class="full-size-image" :src="imageURL"/>
        <!--        <img class="Image Preview" :src="previewURL"/>-->
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue'
import {useResultStore} from '@/modules/Result/store'
import {useRoute} from 'vue-router'

const resultStore = useResultStore()
const route = useRoute()
const imageURL = ref('')
const previewURL = ref('')

async function init() {
  const {error, data} = await resultStore.getResultOverview({
    projectId: route.params.projectId
  })
  if (error) return
  console.log('overview', data)
}

const selectedFile = ref(null)

function handleFileUpload(event) {
  selectedFile.value = event.target.files[0]
  previewURL.value = URL.createObjectURL(selectedFile.value)
}

import {uploadPic} from "../api/index"

async function submitImage() {
  if (!selectedFile.value){console.log("nodata"); return}
  const formData = new FormData()
  formData.append('image', selectedFile.value)
  const response = await uploadPic(formData)
  if (response.data.success) {
    imageURL.value = `http://localhost:8100/uploads/${response.data.imageURL}`
    console.log("imageURL.value", imageURL.value)
  }
}

init()
</script>

<style lang="scss" scoped>
.wrap-result-overview-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 360px) 528px;
  grid-gap: 16px;
  padding-bottom: 16px;

  .grid-last {
    grid-column-start: span 2;
  }

  .fitting-operate {
    color: $color-primary;
    cursor: pointer;
  }
}

.image-container {
  display: flex;
  //justify-content: space-between;
}

.image-display {
  height: 100%;
  flex: 1;
  border: 1px solid;
}

.image-preview-container {
  display: flex;
  justify-content: space-between;
}

.full-size-image {
  width: 100%;
  height: 100%;
  // object-fit: cover;  //这个是保持原始比例 但是可能会被裁剪
}

.image-preview img {
  width: 100%;
  max-width: 500px; /* Adjust as needed */
  padding: 0px 50px;
  //object-fit: cover;  //这个是保持原始比例 但是可能会被裁剪
}

.button-type {
  display: flex;
  flex-direction: column;
}

.button-type {
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f0f2f5;
  color: #303133;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  transition: background-color 0.3s;
}
</style>
